<template>
	<view class="tab">
		<view class="example">
			<!--  @touchmove.stop.prevent -->
			<view class="tab-one">
				<search @click="getnav('/pages/productSearch/productSearch','商品名称')"></search>
				<view class="tab-one-banner">
					<uni-swiper-dot :info="banner" :current="current" field="content" :mode="mode">
						<swiper class="swiper-box" @change="change" circular :interval="7000" autoplay="true"
							:duration="500">
							<swiper-item v-for="(item ,index) in banner" :key="index">
								<view class="swiper-item">
									<image :src="item.img" mode="scaleToFill"></image>
								</view>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				</view>
				<view class="tab-one-scroll">
					<uni-swiper-dot :info="cats" :current="current2" field="content" :mode="mode2">
						<swiper :class="fenleiNum<=5?'swiper-box swiper-box2':'swiper-box swiper-box1'"
							@change="change2">
							<swiper-item v-for="(item ,index) in cats" :key="index">
								<view class="swiper-item-two">
									<!-- 685 -->
									<view :style="'width:'+685/getnum(item.length)+'rpx'" v-for="(val,key) in item"
										:key="key" @click="getCat(val)">
										<image :src="val.img" mode="scaleToFill"></image>
										<view class="swiper-item-name">
											{{val.name}}
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				</view>
			</view>
			<view class="tab-Two">
				<shop :list="shop"></shop>
			</view>
		</view>
	</view>
</template>

<script>
	import search from "../../../components/search/search.vue"
	import shop from "../../../components/shop/shop.vue"
	//main.js
	export default {
		data() {
			return {
				scrollTop: 0,
				banner: [], // 轮播图
				shop: [], // 首页商品
				cats: [], // 分类
				current: 0,
				current2: 0,
				num: 10,
				page: 1,
				fenleiNum: 1,
				mode: 'dot',
				mode2: 'round',
				isTrue: true,
			};
		},
		onShow() {
			this.init()
			setTimeout(() => {
				uni.setNavigationBarTitle({
					title: "租赁小程序"
				});
			}, 200)
		},
		onPullDownRefresh() {
			this.init()
			this.num = 10
			this.page = 1
			this.shop = []
			this.isTrue = true
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			console.log("到底了")
			if (this.isTrue) {
				this.shoplist()
			}
		},
		components: {
			search,
			shop
		},
		methods: {
			getnum(num) {
				let isnum = num
				if (num <= 5) {
					isnum = num
				} else if (num == 6 || num == 7 || num == 9) {
					isnum = 3
				} else if (num == 8) {
					isnum = 4
				} else if (num >= 10) {
					isnum = 5
				}
				// console.log('數量',isnum);
				return isnum
			},
			getCat(item) {
				// console.log(item);
				let data = {}
				data.name = item.name
				data.id = item.id
				this.getnav1('/pages/navShop/navShop', JSON.stringify(data))
			},
			change(e) {
				this.current = e.detail.current;
			},
			change2(e) {
				this.current2 = e.detail.current;
			},
			// 对应没有openType和url时的点击事件
			onPress(e) {
				console.log(1111);
				this.getnav1('/pages/navShop/navShop', JSON.stringify(e))
			},
			// 处理数组
			handleArray(data, num) {
				let result = [];
				for (let i = 0; i < data.length; i += num) {
					result.push(data.slice(i, i + num));
				}
				return result;
			},
			init() {
				this.$request("Index/IndexList", {
					data: {

					},
					isLoad: false
				}).then(res => {
					this.banner = res.photo
					// 重组
					let num = 5
					if (res.cats.length <= 5) {
						num = 5
					} else if (res.cats.length == 6) {
						num = 6
					} else if (res.cats.length >= 10) {
						num = 10
					} else if (res.cats.length == 8) {
						num = 8
					} else if (res.cats.length == 9) {
						num = 6
					} else if (res.cats.length == 7) {
						num = 6
					}
					this.fenleiNum = num
					this.cats = this.handleArray(res.cats, num)
					// console.log(this.cats)
					this.shoplist()
				})
			},
			shoplist() {
				this.$request("Index/GoodsList", {
					data: {
						num: this.num,
						page: this.page
					},
					isLoad: false
				}).then(res => {
					let data = res.result
					if (data.length == 0) {
						this.isTrue = false
					}
					for (let i = 0; i < data.length; i++) {
						this.shop.push(data[i])
					}
					// console.log(this.shop)
					this.page++
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-box1 {
		height: 425rpx;
	}

	.swiper-box2 {
		height: 280rpx;
	}

	.tab-one-scroll {

		// height: 420rpx;
		.swiper-item-two {
			height: 195rpx;

			>view {
				// margin-right: 38rpx;
				width: 137rpx;
				text-align: center;
				display: inline-block;
				margin-top: 40rpx;

				image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 100rpx;
				}

				view {
					font-size: 26rpx;
				}
			}

			>view:nth-child(5n) {
				margin-right: 0 !important;
			}
		}

		.swiper-item-three {
			height: 420rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);

			>view {
				// margin-right: 38rpx;
				border: 1rpx solid red;
				width: 137rpx;
				text-align: center;
				display: inline-block;
				margin-top: 40rpx;

				image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 100rpx;
				}

				view {
					font-size: 26rpx;
				}
			}
		}
	}

	page {
		height: 100%;
	}

	.tab-one {
		padding: 24rpx 32rpx;
		background-color: #fff;

		.tab-one-banner {
			box-shadow:
				0px 7px 5.4px rgba(247, 188, 28, 0.17),
				0px 56px 43px rgba(247, 188, 28, 0.085);
			width: 686rpx;
			height: 294rpx;
			margin: 20rpx 0 40rpx 0;
			border-radius: 20rpx;

			image {
				width: 686rpx;
				height: 294rpx;
			}
		}
	}

	.tab-Two {
		padding: 20rpx 32rpx;
		/* #ifdef H5 */
		padding-bottom: 150rpx;
		/* #endif */
	}

	.swiper-item-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
